<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>Document</title>
    <link rel="stylesheet" href="../css/news.css">
    <link rel="stylesheet" href="../css/footer.css">
    <link rel="stylesheet" href="../css/swiper.css">
    <link rel="stylesheet" type="text/css" href="../css/public.css" />
    <style>
        #content {
		width: 100%;
		height: 100%;
		background-color: #FFF;
		position: relative;
	}

	.topHead {
		width: 100%;
		height: 210px;
		position: absolute;
		left: 0;
		top: 0;
	}

	.bg_img {
		width: 100%;
		height: 100%;
	}

	.big_box {
		width: 93%;
		height: 105px;
		position: absolute;
		left: 50%;
		top: 50px;
		transform: translate(-50%, 0);
		display: flex;
		justify-content:space-between
	}

	/* 	.big_box .one {
		padding: 9px 10px;
		border-radius: 5px;
	}

	.big_box .one img {
		width: 62px;
		height: 65px;
	} */
	.big_box .one {
		width: 80px;
		height: 104px;
	}

	.bottAll {
		width: 100%;
		
		/* background-color: #d5d5fc; */
		position: absolute;
		left: 0;
		top: 180px;
		z-index: 99;
	}

	.bottAll .onebg {
		width: 90%;
		height: 50px;
		margin: 0 auto 20px;
		position: absolute;
		left: 50%;
		top: 0;
		transform: translate(-50%, 0);
	}

	.bottAll .onebg .one_bg {
		width: 100%;
		height: 100%;
        border-radius: 10px;
	}

	.box {
		width: calc(100% - 10px);
		height: calc(100% - 12px);
		padding: 6px 5px;
		position: absolute;
		left: 0;
		top: 0;
	}

	.box .right {
		width: 85%;
		height: 100%;
	}

	.box .right .txtBox {
		width: 70%;
		height: 100%;
		font-size: 10px;
		color: #E4E1FF;
	}

	.box .right .txtBox .oneTxt {
		width: 100%;
		overflow-x: scroll;
		white-space: nowrap;
		/* background-color: #6091F6; */
	}

	.oneTxt::-webkit-scrollbar {
		display: none;
	}

	.box .right .txtBox img {
		width: 16px;
		height: 12px;
		margin-left: 5px;
	}

	.box .right .howBox {
		background: #FFFFFE;
		border: 1px solid #8D86F5;
		border-radius: 8px;
		font-size: 10px;
		color: #8D86F5;
		padding: 5px 10px;
	}

	.bottAll .contact {
		width: 90%;
		height: calc(100% - 70px);
		position: absolute;
		left: 50%;
		top: 70px;
		transform: translate(-50%, 0px);

	}

	.contact .headTop {
		width: 100%;
		height: 25px;
        
	}

	.contact .left {
        width: 40px;
		font-size: 12px;
		color: #b1b1b1;
        display: flex;
        flex-wrap:wrap;
        justify-content:center;
        float: left;
        margin-right: 0px;
	}
    .contact .onactive{
        font-weight: bold;
		font-size: 15px;
		color: #2A3445;
		
    }
.on_active{
    border-bottom: 1px solid #8D86F5;
    padding-left: 5px;
    padding-right: 5px;
}

	.contact .bottLists {
		width: 100%;
		height: calc(100% - 30px);
		/* background-color: #FDEBEC; */
		overflow-y: scroll;
	}

	.bottLists::-webkit-scrollbar {
		display: none;
	}

	.bottLists .oneCat {
		width: 100%;
		height: 70px;
		margin-bottom: 10px;
	}

	.bottLists .oneCat .banner {
		width: 65px;
		height: 100%;
		margin-right: 10px;
	}

	.bottLists .oneCat .centerBox {
		width: calc(100% - 115px);
		height: 100%;
		/* background-color: #9D8FA4; */
		font-size: 10px;
		color: #5C617D;
	}

	.bottLists .oneCat .center {
		width: 100%;
		background-color: #F9F7FA;
	}

	.bottLists .oneCat .center p {
		width: 50px;
		/* background-color: #E4E1FF; */
	}

	.bottLists .oneCat .center div {
		width: calc(100% - 125px);
		/* background-color: #afc9ff; */
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
	}

	.oneCat .rightImg {
		width: 40px;
		height: 40px;
	}


	.onBox {
		width: calc(90% - 16px);
		font-size: 12px;
		color: #333333;
		padding: 12px 8px;
		position: fixed;
     
		bottom: 30px;
		left: 50%;
		transform: translate(-50%, 0);
		background-color: #F3F1FF;
		z-index: 999;
	}

	.onBox a {
		color: #7E6CFB;
	}

	.onBox .right {
		width: 25%;
		height: 100%;
	}

	.onBox .right .btn {
		color: #FFFFFF;
		padding: 8px 12px;
		border-radius: 10px;
		background: linear-gradient(90deg, #B6ADFE 0%, #7C6AFB 100%);
	}

	.onBox .right img {
		width: 12px;
		height: 12px;
	}

	.flot {
		width: 40%;
		height: 45px;
		font-size: 12px;
		color: #FFF;
		position: fixed;
		bottom: 170px;
		right: 5%;
		background: linear-gradient(90deg, #C6C6EB 0%, #7C6AFB 100%);
		border-radius: 25px;
		z-index: 999;
	}

	.flot img {
		width: 30%;
		height: 100%;
		border-radius: 50%;
	}

	.flot .right {
		width: 65%;
		height: 100%;
	}
    </style>
</head>

<body>
    <div id="view" v-cloak>
        <div id="content">
        <header>
            <div class="topHead">
				<img src="../image/img/lucky/top_bg.png" alt="" class="bg_img">
				<div class="big_box">
					<!-- 固定图片 -->
					<img src="../image/img/lucky/1.png" alt="" class="one" v-if="!ios" onclick="openSP(2)">
					<img src="../image/img/lucky/2.png" alt="" class="one" v-if="!ios" onclick="openSP(1)">
					<!-- <img src="../image/img/lucky/3.png" alt="" class="one" v-if="!ios" onclick="_url({url:'frame4/yaoqing', title:'我的邀请'})"> -->
					<img src="../image/img/lucky/4.png" alt="" class="one" v-if="!ios" onclick="_url({url:'frame4/renwu',title:'每日任务'})">
                </div>
			</div>
            <div class="bottAll flex_column" id="tv">
                <div class="contact flex_column_between">
					<div class="headTop">
						<div class="left" :class="{'onactive':onactiveindex==0}" tapmode onclick="randomSwitchBtn(0, 'one2')">
                            <span>热门</span><span class="on_active" v-if="onactiveindex==0"></span></div>
                        <div class="left" :class="{'onactive':onactiveindex==1}" tapmode onclick="randomSwitchBtn(1, 'one2')">
                            <span>附近</span><span class="on_active" v-if="onactiveindex==1"></span></div>
						<img src="../image/img/lucky/search.png" alt="" style="width: 16px;height: 16px;float: right;" onclick="_url({}, 'frame0/search_case')" >
					</div>
				
				</div>
            </div>
            
            
          <div style="height:250px;"></div>
        </header>
        <!-- 脚部 -->
        
        <footer>
            <ul class="f-wrap flex-c">
                <li class="f-list active">
                    <img src="../image/index_images/button01.png" alt="">
                    <span>缘分</span>
                </li>
                <li class="f-list" onclick="_index(1)">
                    <img src="../image/index_images/button2.png" alt="">
                    <span>动态</span>
                </li>
                <li class="f-list" onclick="_index(2)">
                    <img src="../image/index_images/button3.png" alt="">
                    <span>聊天</span>
                    <span class="num new-hide"></span>
                </li>
                <li class="f-list" onclick="_index(4)">
                    <img src="../image/index_images/button5.png" alt="">
                    <span>我</span>
                </li>
            </ul>
           
        </footer>
    </div>
</div>
</body>
<script src="../script/jquery.js"></script>
<script src="../script/api.js"></script>
<script src="../script/ffkj.js"></script>
<script src="../script/group.js"></script>
<script src="../script/map.js"></script>
<script src="../script/vue.js"></script>
<script src="../script/update.js"></script>

<script src="../script/swiper.js"></script>
<script src="../script/index.js"></script>
<script>
    var view = new Vue({
        el: '#view',
        data: {
            ios: 1, // 1上架 0非上架,
            lbList: [],
            bpTime: 0,
            bapin: {
                content: '',
                time: 0
            }, // 霸屏
            xuni: [],
            onactiveindex:0,
            
        },
        methods: {
            // 跳转 查看用户详情
            go_userInfo(id, name, sex) {
                go_userInfo(id, name, sex)
            },
            // 跳转
            _url(param, url) {
                _url(param, url);
            },
            // 返回图片路径
            returnImg(url) {
                return returnImg(url);
            }
        }
    })
    var index_sex = $api.getStorage('sex');
    var map;

    apiready = function() {
        $api.fixStatusBar($api.dom('header'));
        $api.fixTabBar($api.dom('footer'));
        map = new Map();
        view.ios = $api.getStorage('shang');

        _heibai(1)
        keyback();


        changeMsgNum()
        // 监听消息数量
        _listener('msgNum', function(ret) {
            if (ret && ret.value) {
                var result = ret.value;
                changeMsgNum(result)
            }
        })
        getAddress()
        _listener('viewappear', function() {
            getAddress()
        })
        getBapin();
        // 获取首页轮播
        // swiperLoad(function () {
        _getUser(function(ret) {
            setOnline(1);
            if (ret.result.shoushi) {
                changeFrame(0);
                setTimeout(function() {
                    _url({
                        type: 2,
                        animationType: 0
                    }, 'frame4/pwd');
                }, 100)
            } else {
                changeFrame(0);
            }
            if (ret.result.zhaohu == 1 && !view.ios) {
                setTimeout(function() {
                   

					_ajax('api/user/index', function(ret, err) {
						if (ret && ret.code == 200) {
							var data = ret.result;
							if(data.length>0){
								showDetail('modal/hi_modal',{data:data})
							}
						}
					}, {
						user_id: $api.getStorage('userid'),
						longitude: $api.getStorage('lon'),
						latitude: $api.getStorage('lat'),
						fate: 1,
					})


                }, 3000)
            }




        })
        // })

        setTimeout(function() {
            updateVision()
        }, 6000)

        // setTimeout(function () {
        //     showDetail('modal/index_ad')
        // }, 3000)


        _listener('newmsg', function(ret) {
            showMsgFrm(ret.value.data)
        })
        _listener('Speaker', function(ret) {
            var result = ret.value.result;
            setTVScroll(result);
        })

        getBeauty()
    }

    // 获取排行榜开启状态 0: 该排行榜显示 1隐藏
    //1恩爱(亲密度)|2女神(收到礼物)|3富豪(送出礼物)|4男神(收到礼物)|5家族(威望)|6(魅力值)|8邀请
    function getRankArr() {
        _ajax('api/config/ranking', function(ret, err) {
            if (ret && ret.code == 200) {
                $api.setStorage('rankArr', ret.data);
                _url({}, 'frame0/index_rank_win')
            } else {
                _msg(ret.msg);
            }
        })
    }
</script>

</html>